<!--
 * @Author: your name
 * @Date: 2021-01-10 12:55:26
 * @LastEditTime: 2021-01-14 15:06:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\pages\user\main.vue
-->
<template>
  <view>
    <view class="head" v-if="userInfo.nickName">
      <image class="head_img" :src="userInfo.avatarUrl" mode="aspectFill" />
      <image class="head_bg" :src="userInfo.avatarUrl" mode="aspectFill" />
      <text>{{userInfo.nickName}}</text>
    </view>


    <view class="head" v-else>
      <button
        class="head_btn"
        type="primary"
        open-type="getUserInfo"
        @getuserinfo="getUserInfo"
        
      >
        登录
      </button>
    </view>
    <button @tap="makePhoneCallHandle">拨打电话</button>
  </view>
</template>

<script>
import { wxLoign } from "@/api/index.js";
export default {
  data() {
    return {
      userInfo: {},
    }
  },
  onLoad(){
      this.userInfo=uni.getStorageSync('userInfo')||{}
  },
  methods: {
    async getUserInfo(e) {
      console.log(e);
      const { userInfo, encryptedData, rawData, iv, signature } = e.detail;
      // 获取验证码
      const [, { code }] = await uni.login();
      // console.log(code);
      // 获取token
      const res = await wxLoign({
        encryptedData,
        rawData,
        iv,
        signature,
        code,
      });
      if(res.data.message){
        uni.setStorageSync('token', res.data.message.token)
        uni.setStorageSync('userInfo', userInfo)
        // 用于更新视图
        this.userInfo=userInfo
        uni.showToast({
          title: '登录成功',
          duration: 2000
        });
      }else{
        uni.showToast({
          title: '出现错误，请重试!',
          icon:"error",// 模拟器图标有问题，但是在手机上正常
          duration: 2000
        });
      }
      // console.log(res,"token");
    },
    // 拨打电话
    makePhoneCallHandle(){
      uni.makePhoneCall({
        phoneNumber:"17687219171"
      })
    }
  },
};
</script>

<style lang="less" scoped>
.head {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330rpx;
  overflow: hidden;
  .head_img{
    width: 172rpx;
    height: 172rpx;
    border-radius: 50%;
  }
  .head_bg{
    position: absolute;
    top: -10%;
    left: -10%;
    z-index: -1;
    width: 120%;
    height: 120%;
    filter: blur(10rpx);
  }
  text{
    font-size: 30rpx;
    color: #fff;
  }
  .head_btn {
    width: 461rpx;
    height: 88rpx;
  }
}
</style>